<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :down="downOption" :up="upOption">
			<view class="cu-list menu">
				<view class="cu-item margin-bottom" v-for="(item,index) in list" :key="index">
					<view class="content flex">
						<view class="solid-right flex-sub">
							<view class="padding-tb padding-right">
								<view>{{item.coupon.name}}</view>
								<view class=" margin-tb-xs " :class="index<2?'text-red':'text-gray'">
									{{item.end_time}}到期
								</view>
								<view @click="showExplain(item)" class="text-gray ">使用说明<text
										class="cuIcon-right"></text>
								</view>
							</view>
						</view>
						<view class="text-center flex align-center padding-left">
							<view v-if="item.coupon.type == 1">
								<view class="text-price text-red text-xxl">{{item.coupon.amount}}</view>
								<view class=" text-grey">优惠券</view>
							</view>
							<view v-else-if="item.coupon.type == 2">
								<view class="text-red text-xxl">{{item.coupon.discount}}</view>
								<view class=" text-grey">折扣券</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>

		<view class="cu-modal" :class="show?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">使用说明</view>
					<view class="action" @click="show=false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl text-left" v-if="showItem.id">
					<view v-if="showItem.coupon.type == 1">
						全场消费满 {{showItem.coupon.min_amount}} 减 {{showItem.coupon.amount}}
						<text v-if="showItem.coupon.max_dec > 0">, 最高可减 {{showItem.coupon.max_dec}} 元</text>
					</view>
					<view v-else-if="showItem.coupon.type == 2">
						全场可享受 {{showItem.coupon.discount}} 折优惠
						<text v-if="showItem.coupon.max_dec > 0">, 最高可减 {{showItem.coupon.max_dec}} 元</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import CouponUserApi from "@/api/coupon_user";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				mescroll: null,
				upOption: {},
				downOption: {
					use: false
				},
				show: false,
				list: [],
				showItem: {}
			}
		},
		methods: {
			upCallback(page) {
				if (page.num == 1) {
					this.list = [];
				}
				CouponUserApi.list({
					page: page.num,
					page_size: page.size
				}).then((res) => {
					this.list = this.list.concat(res.data);
					this.mescroll.endBySize(res.data.length, res.total);
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			showExplain(item) {
				this.show = true;
				this.showItem = item;
			}
		}
	}
</script>

<style scoped>
	.hbyw-50 {
		height: 50vw;
	}
</style>
